<template>
  <div v-loading="relationLoading" class="relationDetail">
    <ContentWrap>
      <div class="table-list-box">
        <el-table
          border
          :height="tableHeight"
          highlight-current-row
          header-row-class-name="table-list-header"
          tooltip-effect="dark"
          style="width: 100%"
          :data="orderLink"
        >
          <el-table-column type="index" :index="indexMethod" label="序号" width="50" />
          <el-table-column prop="linkType" label="关联关系" width="140" :show-overflow-tooltip="true">
            <template slot-scope="scope">{{ formatLinkType(scope.row.linkType) }}</template>
          </el-table-column>
          <el-table-column prop="creationTime" label="关联时间" :show-overflow-tooltip="true" width="180" />
          <el-table-column prop="code" label="电商单号" />
          <el-table-column prop="orderType" label="订单类型" width="140">
            <template slot-scope="scope">{{ formatOrderType(scope.row.orderType) }}</template>
          </el-table-column>
          <el-table-column prop="goodsSku" label="商品编码" width="140" />
          <el-table-column prop="skuName" label="商品名称" />
        </el-table>
      </div>
    </ContentWrap>
  </div>
</template>

<script>
import ContentWrap from '@/components/ContentWrap'
import { getDictByType } from '@/api/dataDict'
export default {
  components: {
    ContentWrap
  },
  props: {
    orderLink: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      orderTypeOption: [],
      linkTypeOption: [],
      relationLoading: false,
      tableHeight: 400
    }
  },
  created() {
    this.getDataDict({ type: 'orderType', ditctType: 'ORDERTYPE' })
    this.getDataDict({ type: 'linkType', ditctType: 'LINKTYPE' })
  },
  methods: {
    indexMethod(index) {
      return index + 1
    },
    /**
     * 获取数据字典
     */
    getDataDict({ type, ditctType }) {
      const dictTypeCode = ditctType
      const appCode = 'call-center'
      const domainCode = 'marketing'
      const parmas = {
        dictTypeCode,
        appCode,
        domainCode
      }
      getDictByType(parmas).then(res => {
        const data = res.data || []
        if (Array.isArray(data)) {
          data.forEach((list) => {
            list.dictCode = Number(list.dictCode)
          })
          if (type === 'orderType') this.orderTypeOption = data // 订单类型
          if (type === 'linkType') this.linkTypeOption = data
        }
      })
    },
    // 关联关系
    formatLinkType(state) {
      if (state === '' && state !== undefined && state !== 'undefined') return '--'
      if (this.linkTypeOption.length) {
        let obj = {}
        obj = this.linkTypeOption.find(list => {
          return Number(list.dictCode) === Number(state)
        })
        if (Object.keys(obj).indexOf('dictName') !== -1) {
          return obj.dictName ? obj.dictName : state
        }
      }
    },
    // 订单类型
    formatOrderType(state) {
      if (state === '' && state !== undefined && state !== 'undefined') return '--'
      if (this.orderTypeOption.length) {
        let obj = {}
        obj = this.orderTypeOption.find(list => {
          return Number(list.dictCode) === Number(state)
        })
        if (Object.keys(obj).indexOf('dictName') !== -1) {
          return obj.dictName ? obj.dictName : state
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
